<template>
	<view style="padding-top: 20upx;">
		<view class="bgFill">
			<view class="couponItem">
				<view class="coupontext flex flex-direction justify-center">
					<view style="font-size: 32upx;font-weight: bold;">美试券 {{money}}</view>
					<text style="font-size: 24upx;margin-top: 20upx;">{{time}}</text>
				</view>
			</view>
		</view>
		<view style="width: 100%;height: 20upx;"></view>
		<scroll-view class="listBox" scroll-y :style="{height: scrollheight}" @scrolltolower="lower" :scroll-top="totop">
			<view class="detailItem flex align-center justify-between" v-for="i in list">
				<image class="wicon" src="../app_admin/image/balance.png"></image>
				<view style="width: 570upx;">
					<view class="flex align-center justify-between">
						<text style="font-size: 28upx;font-weight: bold;">{{type_text[i.source_type]}}</text>
						<text style="font-size: 28upx;font-weight: bold;color:#ff6588;">{{i.balance}}</text>
					</view>
					<view class="flex align-center justify-between" style="font-size: 22upx;color: #aaa;margin-top: 10upx;">
						<text>{{i.create_time}}</text>
						<view>{{i.bonus_from}}</view>
					</view>
				</view>
			</view>
			<view class="hasmore">{{hasmore?'加载中':'没有更多了'}}</view>
		</scroll-view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				scrollheight:'0px',
				page:1,
				page_size:10,
				list:[],
				totop:0,
				hasmore:true,
				type_text:'',
				money:'',
				time:''
			};
		},
		onLoad(op){
			this.id = op.id
			this.money = op.money
			this.time = op.time
		},
		onShow() {
			this.page = 1
			this.hasmore = true
			this.list = []
			this.loadList()
		},
		onReady(){
			this.getHeight()
		},
		methods: {
			lower(){
				if(this.hasmore){
					this.loadList()
				}
			},
			getHeight() {
				var that = this
				uni.getSystemInfo({
					success(res) {
						var windowHeight = res.windowHeight - 0
						let view2 = uni.createSelectorQuery().in(that).select(".listBox");
						view2.fields({
							size: true,
							scrollOffset: true,
							rect: true
						}, data => {
							that.scrollheight = windowHeight - data.top - 20 + 'px'
							
						}).exec();
					}
				})
			},
			loadList(){
				this.$request({
					url: this.$api.wallet.balance_log,
					method:'post',
					data: {
						page:this.page,
						limit:this.page_size,
						b_type:2,
						source_id:this.id,
						s_type:3,
						log_type: 1
					}
				}).then(res => {
					if (res.code == 0) {
						this.page ++
						this.type_text = res.type_text
						this.hasmore = res.data.length == this.page_size
						this.list = this.list.concat(res.data)
					}
				}).catch(res => {})
			}
		}
	}
</script>

<style scoped>
	.wicon{
		width: 70upx;
		height: 70upx;
	}
	.coupontext{
		height: 180upx;
		margin-left:140upx;
		color: #fff;
	}
	.couponItem{
		background-image: url(../../static/image/WB/inDetail.png);
		width: 100%;
		height: 180upx;
		background-size: 100% 100%;
		position: relative;
	}
	.listBox{
		width: 700upx;
		background: #fff;
		padding: 20upx;
		margin: 0 auto;
		border-radius: 20upx;
	}
	.detailItem{
		padding: 20upx 0;
		width: 100%;
	}
	.bgFill {
		background: #fff;
		padding: 20upx;
		width: 700upx;
		padding-bottom:30upx;
		margin: 0 auto 0;
		border-radius: 20upx;
	}

	page {
		background: #f5f5f5;
	}
</style>
